<template>
   <div>
       <header></header>
           <h1>我的文件列表</h1>

            <van-dropdown-menu>
                <van-dropdown-item :options='options1' v-model="mysort" />
                <van-dropdown-item :options='options2' v-model="myorder" />
            </van-dropdown-menu>


            <!-- 弹窗页面 -->
            <van-popup v-model="show">

                请问是否确定删除
                <van-button color='blue' @click="ok">是的</van-button>
                <van-button color='orange' @click="cancel">取消</van-button>

            </van-popup>


            <!-- 文件重命名 -->
            <van-popup v-model="is_show">

                请输入文件名
                <input type="text" v-model="filename"><br>
                <van-button color='blue' @click="queding">确定</van-button>
                <van-button color='orange' @click="cancels">取消</van-button>

            </van-popup>


            <van-button color='orange' @click="get_data">确认查询文件列表</van-button>

           <table width='70%'>
               <tr>
                   <td>文件名</td>
                   <td>操作</td>
               </tr>
               <tr v-for="item,index in filelist">
                   <td>
                       {{item[0]}}
                       <!-- <van-field v-model="item[0]" @blur="edit(item,index)" /> -->
                   </td>
                   <td>
                       <van-button color='red' @click="del(item[0],index)">删除</van-button>
                       <van-button color='blue' @click="download(item[0])">下载</van-button>
                       <van-button color='blue' @click="updatefile(item[0])">重命名</van-button>
                   </td>
               </tr>
           </table>
        <footer />
   </div>
</template>

<script>
export default {
   data () {
      return {
        //弹窗与否 默认不出
        show:false,
        filelist:[],
        //选项列表(排序选项)
        options1:[{text:'文件名',value:0},{text:'后缀',value:1}],
        //排序类型
        options2:[{text:'正序',value:0},{text:'倒序',value:1}],
        //默认排序
        mysort:0,
        //默认排序方式
        myorder:0,
        //文件名称
        filename:'',
        //文件弹窗默认不显示
        is_show:false
      };
   },
   methods: {
       //确定更改文件名
       queding:function(){
            this.axios.get(this.localhost+'updatefile/',{
                params:{
                    id:localStorage.getItem('id'),
                    old_filename:window.updatefile_one,
                    new_filename:this.filename
                }
            })
           .then(res=>{
               console.log(res);
               if (res.data.code == 200){
                   this.is_show = false;
                   this.$toast.success('修改成功')
                   this.get_data()
               }
           })
       },
       //重命名取消
       cancels:function(){
        this.is_show = false
       },
       //文件重命名
       updatefile:function(filename){
            this.is_show = true
            window.updatefile_one = filename
       },
       //文件下载方法
       download:function(filename){

            window.location.href = 'http://localhost:5000/download/?id='+localStorage.getItem('id')+'&filename='+filename

       },
       //确认点击删除
       ok:function(){
           console.log(window.filename);
           this.axios.delete(this.localhost+'del_files/',{
               params:{
                   id:localStorage.getItem('id'),
                   filename:window.filename
               }
           }).then(res=>{
               console.log(res.data.meg);
               if (res.data.code == 200){
                   this.show = false
                   this.$toast.success('删除成功');
                   //刷新页面
                    //    window.location.reload();
                   //动态删除   不改变用户实时点击事件
                    this.filelist.splice(window.delindex,1);

               }
               
           })
       },
       //取消点击
       cancel:function(){
           this.show = false;
       },
       //删除方法
       del:function(filename,index){
           //全局变量传递文件名  使用之后可以自动回收内存空间
           window.filename = filename;
           this.show = true;
           console.log(filename);
           window.delindex = index;

       },
       //封装请求接口
       get_data:function(){
           var back = 'False';
           var reverse = 'False';
           var back_reverse = 'False';
           
           if(this.mysort === 1){
               back = 'True';
           }
           if(this.myorder === 1){
                reverse = 'True';
                back_reverse = 'True';
           }
           //发送请求
            this.axios.get(this.localhost+'filelist/',{
                //params传参
                params:{
                    id:localStorage.getItem('id'),
                    token:localStorage.getItem('token'),
                    reverse:reverse,
                    back:back,
                    back_reverse:back_reverse
                }
            }).then(res=>{
                console.log(res);
                if (res.data.code == 403){
                    this.$toast.fail(res.data.meg)
                    return false
                }else{
                    this.filelist = res.data
                }
            })
       },
   },

   computed: {},

   mounted() {
       this.get_data()
   },

   components: {}
}
</script>
<style lang='css' scoped>

</style>